cd<template>
  <div>
    <el-row>
      <el-col :span="5">
        <el-button type="primary" @click="dialogFormVisible = true">新增接口</el-button>
        <el-dialog title="新增接口" :visible.sync="dialogFormVisible">
          <el-form :model="create_api_form">
            <el-form-item label="接口名称" :label-width="formLabelWidth">
              <el-input placeholder="接口名称" v-model="create_api_form.api_name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item  label="请求方式" :label-width="formLabelWidth">
              <el-input placeholder="post" v-model="create_api_form.request_method" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item  label="接口地址" :label-width="formLabelWidth">
              <el-input placeholder="/v1/case/examine_case" v-model="create_api_form.path" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="信息头" :label-width="formLabelWidth">
              <el-input placeholder="{'content-type': 'application/json;charset=UTF-8'}或者直接用json格式粘贴过来也可以"  v-model="create_api_form.headers" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item  label="请求参数" :label-width="formLabelWidth">
              <el-input placeholder='{"priority":1}或者直接用json格式粘贴过来也可以，没有请求参数填 None' v-model="create_api_form.parameter" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item  label="断言表达式" :label-width="formLabelWidth">
              <el-input placeholder="result.json()['code']==0" v-model="create_api_form.asserts_expression" autocomplete="off"></el-input>
            </el-form-item>



          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="qu_xiao" >取 消</el-button>
            <el-button type="primary" @click="create_api">确 定</el-button>
          </div>
        </el-dialog>
      </el-col>
      <el-col :span="10"> <el-form :inline="true" :model="examine_api_data" ref="examine_case_data" class="demo-form-inline">
        <el-form-item label="接口名称">
          <el-input  placeholder="请输入接口名称搜索" v-model="examine_api_data.api_name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="examine_case">查询</el-button>
        </el-form-item>
      </el-form></el-col>
    </el-row>


    <el-table
      :data="tableData"
      border
      style="width: 100%; margin: 20px 0 "
      max-height="900"

    >
      <el-table-column  prop="create_time" label="创建日期" width="200"></el-table-column>
      <el-table-column  prop="api_name" label="接口名称" width="200"></el-table-column>
      <el-table-column  prop="request_method" label="请求方式" width="200"></el-table-column>
      <el-table-column  prop="path" label="接口地址" width="200"></el-table-column>
      <el-table-column  prop="headers" label="信息头" :show-overflow-tooltip="true" width="200"></el-table-column>
      <el-table-column  prop="parameter" label="请求参数" :show-overflow-tooltip="true" width="200"></el-table-column>
      <el-table-column  prop="asserts_expression" label="断言表达式" width="200"></el-table-column>
      <el-table-column  prop="return_parameters" label="返回参数" :show-overflow-tooltip="true" width="200"></el-table-column>


    </el-table>
  </div>
</template>

<script>
  export default {
    name: "ApiRecord",
    methods: {
     created() {
      this.refresh();
    },
      update_case(){
        this.$xin.post(this.http+"/v1/case/update_case", this.update_case_form).then(res=>{
          this.up_dialogFormVisible = false;
          this.refresh();
        })
      },
      create_api(){
       //把参数直接转化为json对象
        try {
          this.create_api_form.headers=JSON.parse(this.create_api_form.headers);
        }
        catch (e) {
        }
        try {
          this.create_api_form.parameter=JSON.parse(this.create_api_form.parameter);
        }
        catch (e) {
        }
        this.$xin.post(this.http+"/v1/apis/api_record", this.create_api_form).then(res=>{
          this.dialogFormVisible = false;
          console.log(res.data);
          this.refresh();
          this.create_api_form={};
          this.$message({
            message: res.data.content,
            type: 'success'
          });

        }).catch(err => {
          this.$message.error('参数错误')
        })
      },
      handleEdit(index, row) {
        this.up_dialogFormVisible = true;
        console.log(index, row);
        this.update_case_form=row
      },
      cancel(){
        this.up_dialogFormVisible = false;
        this.refresh();
      },

      handleDelete(index, row) {
        this.$xin.post(this.http+"/v1/case/del_case", {"id":row.id}).then(res=>{
          console.log(res.data);
          this.refresh();
          this.$message({
            message: '删除成功',
            type: 'success'
          });

        }).catch(err => {
          this.$message.error('参数错误');

        })
      },
      qu_xiao(){
        this.create_api_form={};
          this.dialogFormVisible = false
      }
      ,
      examine_case(){
        this.$xin.post(this.http+"/v1/apis/examine_api", this.examine_api_data).then(res=>{
          this.tableData=res.data;
          console.log(res);
          this.$message({
            message: '查询成功',
            type: 'success'
          });

        }).catch(err => {
          this.$message.error('参数错误');
        })
      },
      //页面刷新
      refresh(){
        this.$xin.post(this.http+"/v1/apis/examine_api", {api_name:""}).then(res=>{
          this.tableData=res.data;
        })
      }

    },

  mounted() {
    this.refresh();
  },
    data() {
      return {
        //全局变量使用
        http:this.config.ip,
        tableData: [],
        examine_api_data:{
          api_name:""
        },
        dialogTableVisible: false,
        dialogFormVisible: false,
        up_dialogTableVisible: false,
        up_dialogFormVisible: false,
        create_api_form: {
          api_name: "",
          request_method: "",
          path: "",
          headers:"",
        parameter: "",
        asserts_expression:""
      },
        update_case_form: {
          id:"",
          module_name: "",
          title: "",
          priority: "",
          precondition: "",
          operating_steps: "",
          expected_result: "",
          actual_result: "",
          test_result: "",
          bug: ""
        },
        formLabelWidth: '120px'
      }

    },


  }
</script>

<style scoped>

</style>
